<template>
  <div style="padding: 5px;">
    <el-card class="box-card">
      <el-row>
        <el-col>
          <div class="grid-content bg-purple" />
          <span>商户名称:</span>
          <el-input v-model="tableForm.clientname" placeholder="请输入内容" size="medium" />
        </el-col>
        <el-col>
          <div class="grid-content bg-purple-light" />
          <span>订单号:</span>
          <el-select v-model="tableForm.ordernumber" placeholder="请选择" size="medium">
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-col>
        <el-col>
          <span>配送方式:</span>
          <el-select v-model="tableForm.distribution" placeholder="请选择" size="medium">
            <el-option
              v-for="(item, index) in distribution"
              :key="index"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>下单日期:</span>
          <el-date-picker
            ref="format"
            v-model="value2"
            type="datetimerange"
            align="rigth"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['12:00:00', '08:00:00']"
            size="mini"
          />
        </el-col>
        <el-col>
          <div class="grid-content bg-purple" />
          <span>商户ID:</span>
          <el-select v-model="tableForm.clientId" placeholder="请选择" size="medium">
            <el-option
              v-for="(item, index) in Merchant"
              :key="index"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-col>
        <el-col>
          <div class="grid-content bg-purple" />
          <el-button type="primary" size="medium" @click="OrderInquiry">查询</el-button>
          <el-button size="medium" @click="resetting">重置</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-radio-group v-model="radio1">
            <el-radio-button label="全部" />
            <el-radio-button label="待支付" />
            <el-radio-button label="批量操作" />
            <el-radio-button label="待配送" />
            <el-radio-button label="待发货" />
            <el-radio-button label="已收获" />
            <el-radio-button label="售后退款" />
            <el-radio-button label="已经取消" />
            <el-radio-button label="已经完成" />
          </el-radio-group>
        </el-col>
        <el-col :span="3">
          <el-button size="medium" type="primary" @click="addOrder">+新增</el-button>
        </el-col>
      </el-row>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%;"
        :default-sort="{prop: 'date', order: 'descending'}"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column align="center" label="商户ID" width="120" prop="clientId" />
        <el-table-column prop="clientname" align="center" label="商户名称" width="120" />
        <el-table-column prop="ordernumber" label="订单号" sortable show-overflow-tooltip width="120" />
        <el-table-column prop="commoditylist" sortable align="center" label="商品列表" width="120" />
        <el-table-column prop="ordertime" align="center" label="下单时间" show-overflow-tooltip />
        <el-table-column prop="ordermoney" align="center" sortable label="订单金额" width="120" />
        <el-table-column prop="distribution" align="center" sortable label="配送方式" width="120" />
        <el-table-column prop="consignee" label="收获人/提货人" width="120" />
        <el-table-column prop="state" align="center" label="状态" width="120" />
        <el-table-column align="center" label="操作">
          <template #default="{row}">
            <el-link type="primary" @click="fromdataBtn(row)">查看订单</el-link>&nbsp;
            <el-link type="primary" @click="deleteOrder(row.id)">删除</el-link>&nbsp;
            <el-link type="primary" @click="addOrder(row)">编辑</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col>
          <el-pagination
            background
            :current-page="qureInfo._page"
            :page-sizes="[1, 2, 5, 7]"
            :page-size="qureInfo._limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>
      <de-tails :dialog-visible.sync="dialogVisible" :from-dataup="fromdata" />
    </el-card>
    <add-order :dialog-visiblefrom.sync="dialogVisiblefrom" :addfromdata="addfromdata" :consignee="consignee" @getOrderPage="getOrderPage" />
  </div>
</template>
<script>
import { getOrder, getOrderPage, deleteOrderPage, GetOrderListQuery } from '@/api/table';
import deTails from '@/views/orderlist/component/details';
import addOrder from '@/views/orderlist/component/addOrder';
export default {
  name: 'Orderlist',
  components: {
    deTails,
    addOrder,
  },
  data() {
    return {
      radio1: '全部',
      tableForm: {
        ordernumber: '', // 订单号
        clientname: '', // 商户名称
        distribution: '', // 配送方式
        clientId: '', // 商户ID
      },
      fromdata: {}, // 订单详情
      addfromdata: {}, // 编辑订单
      options: [], // 订单号
      distribution: [], // 配送方式
      Merchant: [], // 商户ID
      ordertime: [], // 下单时间
      consignee: [], // 收货人
      value1: '',
      value2: '',
      tableData: [],
      qureInfo: {
        query: '',
        _page: 1, // 当前页码值
        _limit: 5, // 每页显示条数
      },
      total: 0,
      dialogVisible: false, // 显示订单详情弹框
      dialogVisiblefrom: false, // 显示新增编辑订单弹框
      arr: [],
    };
  },
  computed: { },
  watch: {
    fromdata() {
      this.getOrderPage();
    },
  },
  created() {
    this.getOrder();
    this.getOrderPage();
  },
  methods: {
    addOrder(v) {
      this.dialogVisiblefrom = true;
      if (v.id) {
        console.log('编辑');
        this.addfromdata = v;
      } else {
        console.log('新增');
        this.addfromdata = {
          clientname: '', // 商户名称
          distribution: '', // 配送方式
          consignee: '', // 收获人
          state: '', // 状态
          commoditylist: '', // 配送地址
          phone: '', // 联系方式
          discounts: '', // 活动优惠
          packaging: '', // 包装
          discountsticket: '', // 优惠券
          distributioncost: '', // 配送费
          ordertime: '', // 下单时间
          ordermoney: '', // 订单金额
        };
      }
      const time = this.dateFormat();
      this.addfromdata.ordertime = time;
      // console.log(this.addfromdata, 'pppp');
    },
    fromdataBtn(e) {
      this.dialogVisible = true;
      // console.log(e);
      this.fromdata = e;
    },
    // btn() {
    //   console.log(this.value1, '时间');
    // },
    resetting() {
      this.tableForm = {
        ordernumber: '', // 订单号
        clientname: '', // 商户名称
        distribution: '', // 配送方式
        clientId: '', // 商户ID
      };
    },
    async OrderInquiry() {
      if (this.tableForm.ordernumber) {
        const { data } = await GetOrderListQuery({ ordernumber: this.tableForm.ordernumber });
        this.tableData = data;
      } else if (this.tableForm.distribution) {
        const { data } = await GetOrderListQuery({ distribution: this.tableForm.distribution });
        this.tableData = data;
      } else if (this.tableForm.clientId) {
        const { data } = await GetOrderListQuery({ clientId: this.tableForm.clientId });
        this.tableData = data;
      } else if (this.tableForm.clientname) {
        const { data } = await GetOrderListQuery({ clientname: this.tableForm.clientname });
        this.tableData = data;
      } else if (this.tableForm.ordernumber && this.tableForm.distribution && this.tableForm.clientId && this.tableForm.clientname) {
        const { data } = await GetOrderListQuery();
        console.log('0000');
        this.tableData = data;
      } else {
        this.getOrderPage();
      }
    },
    async deleteOrder(id) {
      console.log(id);
      await this.$confirm('确定要删除订单吗？');
      await deleteOrderPage(id);
      await this.getOrderPage();
      this.$message.success('删除员工成功');
    },
    async getOrderPage() {
      // console.log(11);
      const data = await getOrderPage(this.qureInfo);
      this.total = data.headers['x-total-count'] - 0;
      // console.log(data.data, '222');
      this.tableData = data.data;
    },
    async getOrder() {
      const { data } = await getOrder();
      console.log(data, '数据');
      data.forEach(item => {
        // console.log(item.ordernumber, '订单号');
        this.options.push({ 'label': item.ordernumber });
        // console.log(item.distribution, '配送方式');
        this.distribution.push({ 'label': item.distribution });
        this.Merchant.push({ 'label': item.clientId });
        this.ordertime.push(item.ordertime);
        this.consignee.push({ 'label': item.consignee });
      });
      // console.log(this.options, '订单号');
      // console.log(this.distribution, '配送方式');
      // console.log(this.Merchant, '商户ID');
      // console.log(this.ordertime, '下单时间');
    },
    handleSizeChange(val) {
      this.qureInfo._limit = val;
      this.getOrderPage();
    },
    handleCurrentChange(val) {
      this.qureInfo._page = val;
      this.getOrderPage();
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    dateFormat() {
      const t = new Date();
      // 日期格式
      const format = 'Y-m-d h:i:s';
      const year = t.getFullYear();
      // 由于 getMonth 返回值会比正常月份小 1
      let month = t.getMonth() + 1;
      let day = t.getDate();
      let hours = t.getHours();
      let minutes = t.getMinutes();
      let seconds = t.getSeconds();
      month = month > 9 ? month : `0${month}`;
      day = day > 9 ? day : `0${day}`;
      hours = hours > 9 ? hours : `0${hours}`;
      minutes = minutes > 9 ? minutes : `0${minutes}`;
      seconds = seconds > 9 ? seconds : `0${seconds}`;
      const hash = {
        Y: year,
        m: month,
        d: day,
        h: hours,
        i: minutes,
        s: seconds,
      };
      return format.replace(/\w/g, (o) => {
        return hash[o];
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}
.box-card {
  width: 100%;
  height: 100%;
  padding-bottom: 30px;
  .el-row {
    position: relative;
    display: flex;
    margin-top: 20px;
    .el-col {
      display: flex;
      align-items: center;
      .el-input {
        width: 200px;
        margin-left: 5px;
      }
      .el-select {
        width: 250px;
        margin-left: 5px;
      }
    }
  }
  .el-alert {
    margin-top: 50px;
    background-color: #e6f7ff;
    margin-bottom: 15px;
  }
  ::v-deep .el-alert__icon {
    color: #078fea;
  }
  .el-table {
    margin-top: 20px;
  }
  ::v-deep .el-pagination__total {
    position: absolute;
    left: 0;
    display: flex;
    justify-content: flex-start;
  }
  .el-pagination {
    margin-left: 500px;
  }
  .el-col-24 {
    margin-top: 10px;
  }
}
</style>
